<template>
<div class="flex justify-center">
  <div style="width:800px; " >
    <div  class="flex flex-col justify-center" id="custom-modal-container">
      <div v-if="!visibleD">
        <a-list item-layout="vertical" :loading="loading" size="large" :pagination="false" :grid="{ gutter: 0,  column:3 }" :data-source="listData" @scroll="handleScroll">
          <template #loadMore>
            <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
              <a-spin v-if="!pagination.ismore" />
              <a-button v-else @click="loadMore">加载更多</a-button>
            </div>
          </template>
          <template #renderItem="{ item }">
            <a-list-item key="item.kctitle">
              
              <div class="flex flex-col" >
                <img
                  style="width:252px;height:142px;object-fit: center;border-radius: 5px;"
                  
                  class="cursor-pointer"
                  :src="'/js'+item.smallpic"
                  @click="showxw(item)"
                  @error="onImageError"
                />
                <div class="flex flex-col ">
                <span class="text-bold truncate mt-1 font-bold cursor-pointer"  @click="showxw(item)">{{item.title}}</span>
                
                <span class="flex flex-1 text-gray-400 text-xs">{{item.updateDate}}</span>
                </div>
              </div>
            </a-list-item>
          </template>     
        </a-list>
        <a-divider v-if="!pagination.ismore">没有更多数据</a-divider>
        </div>

      </div>
      <div v-if="visibleD" class="w-full h-full">
          <NewsDetail :detailXinwen="newsobj" @closeDetail="closeDetail"/>
      </div>
 
  
<!--详情抽屉-->

  
  </div>

  </div>
</template>
<script lang="ts">
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { ref,defineComponent,onMounted } from 'vue';
import { newslistapi } from '/@/api/dp/dpbaseapi';
import NewsDetail from '/@/views/dp/xinwen/newsfrontdetail.vue';

import { List,Divider,ListItem } from 'ant-design-vue';


export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    AList:List,
    AListItem:ListItem,
    ADivider:Divider
  },
})
</script>

<script lang="ts" setup>  
    const listData=ref([]);
    const pagination = ref({
        pageSize: 9,
        pageNo:1,
        count: 0,
        ismore:false,
    });
    const visibleD = ref<boolean>(false);
    const newsobj=ref({});
    const loading=ref(true);
    defineExpose({reloadNewList});

    onMounted(()=>{
      reloadNewList();
    });

    function reloadNewList(){
      listData.value = [];
      pagination.value.pageNo=1;
      getNewslist();
    }

    async function getNewslist(){
      loading.value=true;
      const res = await newslistapi({xwtype:'2',pageNo:pagination.value.pageNo,pageSize:pagination.value.pageSize});
      listData.value = [...listData.value, ...res.list]; 
      loading.value=false;
      pagination.value.pageNo=res.pageNo;
      pagination.value.pageSize=res.pageSize;
      pagination.value.count=res.count;
      pagination.value.ismore=res.list.length<pagination.value.pageSize?false:true;
    }

    function showxw(obj){
      visibleD.value=true;
      newsobj.value=obj;
    }
    
     const onImageError= (event) => {
       event.target.style.backgroundColor ='#f5f5f5'
     }

     function closeDetail(){
      visibleD.value=false;
    }

    function loadMore(){
      pagination.value.pageNo=pagination.value.pageNo+1;
      getNewslist();
    }
    
</script>

<style scoped>
.text-ellipsis {
  height: 2.6em; /* 设置高度为固定的行高的两倍 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在两行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 添加省略号 */
}

img{  
    cursor: pointer;  
    transition: all 0.6s;  
}  
  img:hover{  
    object-fit:none;
    transition: all 0.6s;  
}  

           
</style>